<template>
  <div class="form-base-demo">
    <h3 class="title">基本</h3>
    <div v-width="400">
      <d-form
        ref="form"
        :validOnChange="validOnChange"
        :showErrorTip="showErrorTip"
        :labelPosition="labelPosition"
        :labelWidth="110"
        :rules="validationRules"
        :model="model"
      >
        <d-form-item>
          <!-- <d-switch-list :datas="labels" v-model="labelPosition" :small="true"></d-switch-list> -->
          <div>
            <d-checkbox v-model="showErrorTip">使用Message提示错误信息</d-checkbox>
          </div>
          <div>
            <d-checkbox v-model="validOnChange">数据变化后做校验</d-checkbox>
          </div>
        </d-form-item>
        <d-form-item label="用户名" prop="name">
          <template v-slot:label><i class="d-icon-user"></i> 用户名</template>
          <input text="text" v-model="model.name" />
        </d-form-item>
        <d-form-item label="密码" icon="d-icon-complete" prop="password">
          <input text="password" v-model="model.password" />
        </d-form-item>
        <d-form-item>
          <d-button color="primary" :loading="isLoading" @click="submit">提交</d-button>&nbsp;&nbsp;
          <d-button @click="reset">重置</d-button>
        </d-form-item>
      </d-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'formBaseDemo',
  data () {
    return {
      isLoading: false,
      labelPosition: 'left',
      labels: {
        left: '左对齐',
        right: '右对齐'
      },
      model: {
        name: '',
        password: ''
      },
      validationRules: {
        required: ['name', 'password']
      },
      showErrorTip: true,
      validOnChange: true
    }
  },
  methods: {
    submit () {
      this.isLoading = true
      let validResult = this.$refs.form.valid()
      if (validResult.result) {
        this.$Message('验证成功')
        setTimeout(() => {
          this.isLoading = false
        }, 1000)
      } else {
        this.isLoading = false
      }
    },
    reset () {
      this.$refs.form.resetValid()
    }
  }
}
</script>

<style lang="stylus" scoped>
// .form-base-demo
</style>
